<template>
    <div class="app-container">
      <div class="filter-container">
        <el-select
          v-model="listQuery.query_type"
          style="width: 150px"
          class="filter-item"
          @change="onChangeType"
        >
          <el-option
            v-for="item in typeOptions"
            :key="item.key"
            :label="item.label"
            :value="item.key"
          />
        </el-select>
        <el-select
          v-if="listQuery.query_type != 3"
          v-model="listQuery.username"
          clearable
          filterable
          style="width: 150px"
          class="filter-item"
          @change="handleFilter"
          placeholder="渠道搜索"
        >
          <el-option
            v-for="(item, index) in dailiArr"
            :key="index"
            :label="item"
            :value="item"
          />
        </el-select>
        
        <el-date-picker
          v-if="listQuery.query_type != 1"
          v-model="value1"
          type="daterange"
          align="left"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          class="filter-item pickertime"
          format="yyyy-MM-dd"
          value-format="timestamp"
          :picker-options="pickerOptions2"
          @change="handleFilter"
        />
        <a-button type="primary" size="large" @click="handleFilter">
          搜索
        </a-button>
        <a-button type="default" size="large" @click="handleCancel">
          重置
        </a-button>
      </div>
  
      <el-table
        :key="tableKey"
        v-loading="listLoading"
        :data="list"
        fit
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column
          key="1"
          label="日期"
          align="center"
          prop="time_"
          sortable="custom"
          min-width="120"
        >
        </el-table-column>
        <el-table-column
          v-if="listQuery.query_type != 3"
          key="2"
          prop="username"
          label="账号"
          min-width="120"
          align="center"
        ></el-table-column>
        <el-table-column v-if="listQuery.query_type == 1" label="设置的回传率" min-width="100" align="center">
          <template slot-scope="{ row }">
            <span>{{(row.probability / 100).toFixed(2)}} %</span>
          </template>
        </el-table-column>
        <el-table-column
          key="4"
          prop="back_sum"
          sortable
          label="数量"
          min-width="120"
          align="center"
        ></el-table-column>
        <el-table-column
          key="6"
          prop="back"
          sortable
          label="回传数量"
          min-width="120"
          align="center"
        ></el-table-column>
        <el-table-column
          key="5"
          prop="no_back"
          sortable
          label="未回传数量"
          min-width="120"
          align="center"
        ></el-table-column>
        
        <el-table-column label="真实回传率" min-width="100" align="center">
          <template slot-scope="{ row }">
            <span>{{(row.back /row.back_sum * 100).toFixed(2)}} %</span>
          </template>
        </el-table-column>
        <el-table-column v-if="listQuery.query_type != 3" label="落地页链接" min-width="100" align="center">
        <template slot-scope="{row}">
          <div v-if="langind_list[row.landing_page_id]">{{ langind_list[row.landing_page_id].url +"?channel=" + row.username + "&qd=" +  row.username}}</div>
        </template>

      </el-table-column>
      <el-table-column v-if="listQuery.query_type != 3" label="落地页图片" min-width="100" align="center">
        <template slot-scope="{row}">
          <el-image 
            v-if="langind_list[row.landing_page_id]"
            style="width: 50px; height: 100px"
            :src="langind_list[row.landing_page_id].img_url" 
            :preview-src-list="[langind_list[row.landing_page_id].img_url]">
          </el-image>
        </template>
      </el-table-column>
      </el-table>
      
  
      <pagination
        v-show="total > 0"
        :total="total"
        class="pageShow"
        :page.sync="listQuery.page"
        :page_size.sync="listQuery.page_size"
        @pagination="getList"
      />
      <pagination
        v-show="total > 0"
        layout="prev, pager, next"
        :small="true"
        class="pageHidden"
        :total="total"
        :page.sync="listQuery.page"
        :page_size.sync="listQuery.page_size"
        @pagination="getList"
      />
    </div>
  </template>
  
  <script>
  import {
    getProxyNameList,
    getChannelNameList,
    getTXstatistics,
    getDataReport,
    subordinate,
    getLangingPage,
  } from "@/api/admin/admin";
  import waves from "@/directive/waves"; // waves directive
  import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
  import {qd_List} from '@/utils/index'
  export default {
    name: "Report",
    components: { Pagination },
    directives: { waves },
    filters: {
      statusFilter(status) {
        const statusMap = {
          published: "success",
          draft: "info",
          deleted: "danger",
        };
        return statusMap[status];
      },
    },
    data() {
      return {
        dialogVisible: false,
        userType: this.$store.state.user.type,
        username: this.$store.state.user.name.username,
        tableKey: 0,
        list: null,
        total: 0,
        listLoading: true,
        value1: "",
        dailiArr: [],
        listQuery: {
          type: 'jl',
          page: 1,
          page_size: 20,
          query_type: 1,
          username: "",
          time_start: "",
          time_end: "",
        },
        pickerOptions2: {
          shortcuts: [
            {
              text: "昨天",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24);
                picker.$emit("pick", [start, end]);
              },
            },
            {
              text: "最近一周",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit("pick", [start, end]);
              },
            },
          ],
        },
        typeOptions: [],
        qd_List: qd_List,
        langind_list : {},
        tg_option: {},
      };
    },
    created() {
      this.getLangingPages()
      this.getList();
      this.getChannelNameList();
    },
    mounted() {
      
        this.listQuery.query_type = 1;
        this.typeOptions = [
          { label: "实时数据", key: 1 },
          { label: "历史记录", key: 2 },
          { label: "总统计", key: 3 },
        ];
      
    },
    methods: {
      getLangingPages(){
        getLangingPage({'tg': '1'}).then(res => {
          if (res.STATUS == 200){
            this.langind_list = res.DATA.landing_page;
            this.tg_option = res.DATA.tg
          }
        })
      },
      getList() {
        this.listLoading = true;
        if (this.value1) {
          this.listQuery.time_start = this.value1[0] / 1000;
          this.listQuery.time_end = this.value1[1] / 1000;
        } else {
          this.listQuery.time_start = "";
          this.listQuery.time_end = "";
        }
        getTXstatistics(this.listQuery).then(res => {
          this.listLoading = false;
          if (res.STATUS == 200){
            this.list = res.DATA.list
          }
          // console.log(this.list)
        })
          
      },
      //切换查看类型
      onChangeType() {
        this.listQuery.username = '';
        this.listQuery.time_start =  ""
        this.listQuery.time_end = ""
        this.handleFilter();
      },
      //获取代理列表
      getProxyNameList() {
        getProxyNameList().then((r) => {
          this.dailiArr = r.DATA;
        });
      },
      //获取渠道列表
      getChannelNameList() {
        getChannelNameList().then((r) => {
          this.dailiArr = r.DATA;
        });
      },
      handleFilter() {
        this.listQuery.page = 1;
        
        this.getList();
      },
      handleCancel() {
        this.value1 = "";
        this.listQuery.username = ""
        this.listQuery.page = 1;
        this.listQuery.query_type = 1;
        this.listQuery.time_start =  ""
        this.listQuery.time_end = ""
        this.getList();
      }
    }
  };
  </script>
  
  <style scoped>
  .demo-table-expand {
      font-size: 0;
    }
    .demo-table-expand label {
      width: 90px;
      color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
      margin-right: 0;
      margin-bottom: 0;
      width: 24%;
    }
  .pageHidden {
    display: none;
  }
  @media (max-width: 550px) {
    .pageShow {
      display: none;
    }
    .pageHidden {
      display: block;
    }
    .pickertime {
      width: 100%;
    }
  }
  .filter-item {
    margin-bottom: 3px;
  }
  </style>
  